<template>
    <page>
        <pageHeader :showBack="true">电影详细信息</pageHeader>
        <div>这里是电影的详细信息</div>
        <div>{{currentTime}}</div>
        <button type="button" @click="isShow=true">显示</button>
        <transition :duration="200" enter-active-class=" animated slideInUp" leave-active-class=" animated slideOutDown">
            <div class="mask" v-if="isShow">
                <button type="button" @click="isShow=false">隐藏</button>
            </div>
        </transition>
        
    </page>

</template>

<script>
    import pageHeader from "../components/PageHeader";
    export default {
        name: "movieDetail",
        data(){
            return {
                isShow:false
            }
        },
        computed: {
            currentTime() {
                return Date.now();
            }
        },
        components: {
            pageHeader
        }
    };
</script>

<style scoped lang="scss">
.mask{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    top: 0;
}
</style>